<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>门店首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/icons-extra.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
        <link href="css/skin.css" rel="stylesheet" />
        <script src="js/flexible.js"></script>
	</head>
	<body style="background: #CCCCCC;padding-bottom:62px;">
		<section class="header">
			<div class="data">
				<a href="statistics.html">
					<div class="mui-row">
					 	<div class="mui-col-sm-4 mui-col-xs-4">
					 		<h3>客户数量</h3>
					 		<p>452</p>
					 	</div>
					 	<div class="mui-col-sm-4 mui-col-xs-4">
					 		<h3>订金数量</h3>
					 		<p>42</p>
					 	</div>
					 	<div class="mui-col-sm-4 mui-col-xs-4">
					 		<h3>合同数量</h3>
					 		<p>12</p>
					 	</div>
					</div>
				</a> 
			</div>
		</section>
		<section class="notice">
			 <div class="lists" id='scroll-box'>
			 	<ul>
					<li class="mui-clearfix"><a href="order.html" title="通知通"><i>通知</i><span class="mui-ellipsis">11通知通知通知通知通知通知通知</span></a></li>
					<li class="mui-clearfix"><a href="notice_detail.html" title="公告"><i class="gg">公告</i><span class="mui-ellipsis">1公告公告公告公告公告公告公告公告</span></a></li>
					<li class="mui-clearfix"><a href="order.html" title="通知通"><i>通知</i><span class="mui-ellipsis">2通知通知通知通知通知通知通知</span></a></li>
					<li class="mui-clearfix"><a href="notice_detail.html" title="公告"><i>公告</i><span class="mui-ellipsis">3公告公告公告公告公告公告</span></a></li>
					<li class="mui-clearfix"><a href="notice_detail.html" title="公告"><i class="gg">公告</i><span class="mui-ellipsis">1e公告公告公告公告公告公告公告公告</span></a></li>
				</ul>
			 </div>
		</section>
		
		<section class="customwrap">
			<div class="title">
				<ul>
					<li class="mui-table-view-cell">
		                <a class="mui-navigate-right" href="list.html"><span>查看全部客户</span>最近客户</a>
		            </li>
				</ul>
				
			</div>
			<ul class="mui-table-view customs_lists">
				<li class="mui-table-view-cell">
					<a href="order.html">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
								<div class="mui-row">
									<span class="mui-col-sm-3 mui-col-xs-3 mui-ellipsis">测试用户测试用户</span>
									<span class="mui-col-sm-4 mui-col-xs-4">15067165614</span>
									<span class="mui-col-sm-5 mui-col-xs-5 mui-text-right status"><b>新增订单 </b>[待跟进]</span>
								</div>
								<p class="mui-h5 mui-ellipsis">测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="order.html">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
								<div class="mui-row">
									<span class="mui-col-sm-3 mui-col-xs-3 mui-ellipsis">测试用户测试用户</span>
									<span class="mui-col-sm-4 mui-col-xs-4">15067165614</span>
									<span class="mui-col-sm-5 mui-col-xs-5 mui-text-right status"><b>新增订单 </b>[待跟进]</span>
								</div>
								<p class="mui-h5 mui-ellipsis">测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="order.html">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
								<div class="mui-row">
									<span class="mui-col-sm-3 mui-col-xs-3 mui-ellipsis">测试用户测试用户</span>
									<span class="mui-col-sm-4 mui-col-xs-4">15067165614</span>
									<span class="mui-col-sm-5 mui-col-xs-5 mui-text-right status"><b>新增订单 </b>[待跟进]</span>
								</div>
								<p class="mui-h5 mui-ellipsis">测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="order.html">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
								<div class="mui-row">
									<span class="mui-col-sm-3 mui-col-xs-3 mui-ellipsis">测试用户测试用户</span>
									<span class="mui-col-sm-4 mui-col-xs-4">15067165614</span>
									<span class="mui-col-sm-5 mui-col-xs-5 mui-text-right status"><b>新增订单 </b>[待跟进]</span>
								</div>
								<p class="mui-h5 mui-ellipsis">测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="order.html">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
								<div class="mui-row">
									<span class="mui-col-sm-3 mui-col-xs-3 mui-ellipsis">测试用户测试用户</span>
									<span class="mui-col-sm-4 mui-col-xs-4">15067165614</span>
									<span class="mui-col-sm-5 mui-col-xs-5 mui-text-right status"><b>新增订单 </b>[待跟进]</span>
								</div>
								<p class="mui-h5 mui-ellipsis">测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户</p>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="order.html">
						<div class="mui-table">
							<div class="mui-table-cell mui-col-sm-12 mui-col-xs-12">
								<div class="mui-row">
									<span class="mui-col-sm-3 mui-col-xs-3 mui-ellipsis">测试用户测试用户</span>
									<span class="mui-col-sm-4 mui-col-xs-4">15067165614</span>
									<span class="mui-col-sm-5 mui-col-xs-5 mui-text-right status"><b>新增订单 </b>[待跟进]</span>
								</div>
								<p class="mui-h5 mui-ellipsis">测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户测试用户</p>
							</div>
						</div>
					</a>
				</li>
			</ul>
		</section>
		<nav class="mui-bar mui-bar-tab bottom-bar">
			<a class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="list.html">
				<span class="mui-icon mui-icon-list"></span>
				<span class="mui-tab-label">客户</span>
			</a>
			<a class="mui-tab-item" href="statistics.html">
				<span class="mui-icon mui-icon-extra mui-icon-extra-rank"></span>
				<span class="mui-tab-label">统计</span>
			</a>
			<a class="mui-tab-item" href="personal.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="js/zepto.min.js"></script>
		<script>
			(function(){
				var box = $('#scroll-box')
				var hotlist=$('#scroll-box ul');
				var hotli=$('#scroll-box li');
				var num=Math.ceil(hotli.length/2);
				console.log(num)
				var i=0;
				var slate=0;
				var topTimer=setInterval(function(){
					i++
					if(i<num){
						slate=1.85*i;
						//console.log(i)
					}
					else{
						i=0;
						slate=1.85*i;
					}
					//hotlist.style.marginTop='-'+slate+'rem'
					hotlist.animate({
						marginTop:'-'+slate+'rem'
					},500)
					//$hotlist.css({'marginTop':'-'+slate+'rem'});
				},3000)
				if(hotli.length<3){//当头条数目小于3条的时候，不打开动画
					clearInterval(topTimer)
				}

			}())


		</script>
	</body>
</html>
